<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
                padding-top: 100px;
                text-align: center;
                letter-spacing: 10px;
            }
        </style>
</head>

<body>
    <input type="text" placeholder="请输入数字" id="num1">
    <input type="button" value="生成三角形" id="btn">
    <div id="p"></div>
</body>
<script>
    var btn = document.getElementById('btn');
    var p = document.getElementById('p');
    btn.onclick = function () {
        var num1 = document.getElementById('num1').value * 1;
        var j = '*';
        var k = '';
        for (var i = 1; i <= num1; i++) {
            k += '<span>';
            for (var a = 1; a <= i; a++) {
                k += j;
            }
            k += '</span><br>';
            p.innerHTML = k;
        }
        for (var i = num1 - 1; i > 0; i--) {
            k += '<span>';
            for (var a = 1; a <= i; a++) {
                k += j;
            }
            k += '</span><br>';
            p.innerHTML = k;
        }
    }

</script>

</html>